<template>
  <div class="card_content flex-wrap" :style="{'justify-content':propValue.flex}">
    <div
     class="case_card_item"
     :class="propValue.boxShadow==1?'border_shadow':propValue.boxShadow==3?'active_shadow':''"
      v-for="(item, i) of propValue.list"
      :key="i"
      :style="{
        width: propValue.contentwidth + 'rem',
        height: propValue.contentheight + 'rem',
        background: propValue.boxBgcolor,
        margin: propValue.boxMargin + 'rem',
      }"
    >
      <a :href="item.link">
      <div class="case_card_item_img_box" :style="{
            width: propValue.imgwidth + 'rem',
            height: propValue.imgheight + 'rem',
          }">
        <img
            class="case_card_item_img"
            :src="item.icon"
            alt=""
            :style="{
                'margin-top': propValue.imgTop + 'rem',
                'margin-left': propValue.imgLeft + 'rem',
            }"
            />
      </div>

        <div
          class="case_card_content"
          :style="{
            width: propValue.contentwidth + 'rem',
            background: propValue.boxBgcolor,
          }"
        >
          <div
            v-if="item.title"
            :style="{
              'font-size': propValue.titleSize + 'rem',
              color: propValue.titleColor,
              'margin-top': propValue.titleTop + 'rem',
              'margin-left': propValue.titleLeft + 'rem',
            }"
          >
            {{ item.title }}
          </div>
          <div
            v-if="item.content"
            :style="{
              'font-size': propValue.contentSize + 'rem',
              color: propValue.contentColor,
              'line-height': propValue.contentLineheight,
              'margin-top': propValue.contentTop + 'rem',
              'margin-left': propValue.contentLeft + 'rem',
              'margin-right': propValue.contentRight + 'rem',
            }"
          >
            {{ item.content }}
          </div>
        </div>
      </a>
    </div>
  </div>
</template>
<script>
export default {
  props: {
    propValue: {
      type: Object,
      default: () => {},
    },
    element: {
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {};
  },
  mounted() {},
  methods: {},
};
</script>
<style lang="scss" scoped>
.case_card_content {
  padding: 13rem 10rem;
 
}
.case_card_item_img_box{
    overflow: hidden;
    img{width: 100%;height: 100%;  transition: .5s;}
}
.case_card_item:hover .case_card_item_img{
 transform: scale(1.1);
 transition: .3s;
}
.border_shadow{
box-shadow:0 26rem 12rem 0 rgb(0 0 0 / 10%)
}
.active_shadow:hover,.active_shadow:active{
box-shadow: 0 26rem 12rem  0 rgb(0 0 0 / 10%)
}
</style>
